<template>
  <view class="orderHeader">
    <view class="header">
      <view class="oraderTab flex flex-align">
        <image @click="oTtab(1)" class="flex-1" :src="oTindex==1?'/static/team/teamActive24.png':'/static/team/team24.png'" mode="widthFix" />
        <image @click="oTtab(2)" class="flex-1" :src="oTindex==2?'/static/team/teamActive25.png':'/static/team/team25.png'" mode="widthFix" />
      </view>
      <scroll-view scroll-x="true" class="scroll-Y" :show-scrollbar="false" scroll-with-animation="true" :scroll-into-view=toview>
          <view class="flex flex-align">
            <view class="scroll-view-item" v-for="(item,index) in tabList" :key="index" @click="tabIndex(item.id)" :id="'pro_'+item.id">
              <view :class="swIndex==item.id?'tabs active':'tabs'"> {{item.name}} </view>
            </view>
          </view>
      </scroll-view>
      <view class="fixbg flex flex-align flex-bt">
        <view class="searchbox flex flex-align flex-bt">
          <view class="searchicon flex flex-align">
            <view class="ids" style="margin-top: -2rpx;">
              <picker @change="bindPickerChange" confirm-button-color="#FE7431" :value="index" :range="array">
                <view class="left flex flex-align flex-bt">
                  <view class="">{{array[index]}}</view>
                </view>
              </picker>
            </view>
            <image src="@/static/team/team22.png" mode="scaleToFill" />
          </view>
          <view class="search flex flex-align">
            <image src="@/static/team/team23.png" mode="scaleToFill" />
            <input type="text" v-model="keyWord" placeholder="输入关键词搜索" />
            <view class="btns" @click="searchEnd">搜索</view>
          </view>
        </view>
        <view class="flex flex-align selectTime">
          <image src="@/static/team/team03.png"  mode="scaleToFill" @click="openDatePicker" />
          <view class="date-picker">
            <uni-datetime-picker
              v-model="dateRange"
              type="daterange"
              ref="datePickerRef"
              returnType="timestamp"
              @change="onDateChange"
              @confirm="onDateConfirm"
              @cancel="onDateCancel"
              :show="showDatePicker"
              @close="showDatePicker = false"
            ></uni-datetime-picker>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 320rpx;"></view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'

const dataInfo = defineProps({
  show: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  },
  tabList: {
    type: Object,
    default: () => [{
      id:0,
      name:'全部'
    },
    {
      id:1,
      name:'待付款'
    },
    {
      id:2,
      name:'待配送'
    },
    {
      id:3,
      name:'待提货'
    },
    {
      id:4,
      name:'已完成'
    },
    {
      id:5,
      name:'退款售后'
    },]
  },
  type: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['submit', 'update:show'])
let swIndex = dataInfo.type
const toview = ref('')
const keyWord = ref('')
const oTindex = ref(1)
const index = ref(0);
const array = ['用户姓名', '用户手机号', '商品名称','订单ID'];
const arrays = ['pickup_name', 'pickup_phone', 'goods_name','order_id'];
const sendInfo = reactive({
  keyWord: keyWord.value,
  oTindex: oTindex.value,
  swIndex: swIndex,
  search_key: arrays[index.value],
})
tabIndex(swIndex)
function tabIndex(index: any) {
  swIndex = index
  toview.value = 'pro_' + index
  sendInfo.swIndex = index
  emit('submit', sendInfo)
}
function oTtab(index: any) {
  oTindex.value = index
  sendInfo.oTindex = index
  emit('submit', sendInfo)
}
function searchEnd(){
  sendInfo.keyWord = keyWord.value
  emit('submit', sendInfo)
}
const datePickerRef = ref();
const bindPickerChange = (e:any) => {
  index.value = e.detail.value;
  sendInfo.search_key = arrays[index.value]
};
const dateRange = ref([]);
const showDatePicker = ref(false);
function openDatePicker() {
  datePickerRef.value.show();
  // showDatePicker.value = true;
}
// 日期选择器 change 事件处理函数
const onDateChange = (e: any) => {
  console.log('日期选择器 change:', e);
};

// 日期选择器 confirm 事件处理函数
const onDateConfirm = (e: any) => {
  console.log('日期选择器 confirm:', e);
};

// 日期选择器 cancel 事件处理函数
const onDateCancel = (e: any) => {
  console.log('日期选择器 cancel:', e);
};
onMounted(() => {})
async function open() {
  updateShow(true)
}


function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.header{position: fixed;top: 0;left: 0;width: 100%;background: #fff;box-sizing: border-box;border-radius: 0 0 20rpx 20rpx;z-index: 111;
  .scroll-view-item{padding: 20rpx 30rpx;font-size: 28rpx;color: #969799;
    .tabs{position: relative;}
    .active{color: #333;font-weight: 600;
      &::after{content: '';position: absolute;bottom: -16rpx;left: 50%;transform: translateX(-50%);width: 50rpx;height: 12rpx;background: #FE4927;background: url('@/static/shop/shop07.png') no-repeat;
      background-size: 100% 100%;}
    }
  }
  .oraderTab{
    
  }
  .fixbg{box-sizing: border-box;padding: 30rpx;
    image{width: 48rpx;height: 48rpx;margin-left: 10rpx;}
    .selectTime{position: relative;
      .date-picker{position: absolute;z-index: 11;top: 0;left: 1000rpx;}
    }
  }
  .searchbox{background: #FE7431;border-radius: 56rpx;
    .searchicon{padding:0 10rpx 0 30rpx;
      .ids{font-size: 24rpx;color: #fff;}
      image{width: 32rpx;height: 32rpx;}
   }
   .search{background: #fff;border-radius: 60rpx;flex: 1;padding: 10rpx 0;border: 2px solid #FE7431;
     image{width: 48rpx;height: 48rpx;margin: 0 10rpx;}
     input{flex: 1;height: 56rpx;font-size: 26rpx;}
     .btns{color: #FE7431;padding: 0 20rpx;font-weight: bold;}
   }
   
 }
}
.scroll-Y{white-space: nowrap;width: 100%;box-sizing: border-box;}
</style>
